
<!--老师的教案-->
<template>
  <div class="plan-content pt-content-menu">
    <Row class="pageHeader">
      <div class="class-title-wrap">
        <div class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'experiment'}" @click="changeTab('experiment')">实验</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'personMgn'}" @click="changeTab('personMgn')">花名册</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'task'}" @click="changeTab('task')">作业</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'grade'}" @click="changeTab('grade')">成绩</div>
        </div>
<!--        <div style="margin-left: 30px" class="class-title">-->
<!--          <div class="class-title-all" :class="{'active':currentTabComponent == 'video'}" @click="changeTab('video')">视频</div>-->
<!--        </div>-->
      </div>
    </Row>

<!--    具体每个table里面的内容-->
    <template>
      <component v-bind:is="currentTabComponent" class="component-page"
               v-if="currentTabComponent==='experiment'"/>
      <div class="content-wrap " v-if="currentTabComponent!='experiment'">
        <div style="margin-top: 40px;">
          等待开发{{currentTabComponent}}
        </div>
      </div>
      
    </template>
  
  </div>


</template>
<script>
// D:\workspace\beiyou\beiyou\src\view\teaching\components\experiment.vue
import experiment from "@/view/teaching/components/experiment.vue";
import creatExp from '@/view/experimentalScene/designPanel/creatExp'
import guide from "@/view/resourceManagement/guide.vue";
import {MICRO_URL} from "../../../micro/config";
export default {
  components:{experiment,creatExp,guide},
  watch: {
    $route(to, from) {
      this.currentTabComponent = this.$route.query.pageShow||'experiment'
    },
  },
  data () {
    return {
      isCollapsed: false,
      currentTabComponent:this.$route.query.pageShow||'experiment',
    }
  },
  methods: {
    changeTab (tab) {
      
      this.$router.push({
        name: this.$route.name,
        query: {
          pageShow: tab
        }
      });
    },
    
  }
};
</script>
<style scoped>
.lessonPlanPageWrap{
  position: relative;
  height: 100%;
}
.pageHeader{
  position:absolute;
  padding:0px 20px 0 20px;
  z-index: 10;
  width: 400px;
  top:110px;
}
.pageHeader .title{
  float:left;
  font-size:18px;
}
.class-title-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all{
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active{
  font-weight: 700;
  color: #2d2d2d;
  font-size: 20px;
}
.component-page{
  padding-top:-20px !important;
  padding: 20px;
}
.pt-content-menu{
  background-color: var(--card-body-bgcolor);
  border-radius: 8px;
  height: 100% !important;
}

.content-wrap{
  padding:20px;
  padding-bottom: 40px;
}

</style>
